<template>
	<scroll-view class="scroll-view-wrap" scroll-y="true" @scroll="scroll">
		<basic-list 
		@load="loadMore" 
		:isFinished="isFinished" 
		:isLoading="isLoading" 
		:isEmpty="!list.length && isFinished">
			<orderItem 
				v-for="(item, index) in list" 
				:key="index" 
				:item="item"
				@click="handleClick($event, item)"
				@payTimeout="$emit('payTimeout', item)"/>
			
			<search-empty
			slot="empty"
			emptyWord="暂无相关订单记录"
      :styles="{
        position: 'absolute',
        top:'50%',
        width: '100%',
        textAlign: 'center',
        transform:'translateY(-50%)',
        zIndex: '2'
      }"/>
		</basic-list>
	</scroll-view>
</template>
<script>
import orderItem from './order-item'
import sleep from '@/utils/helper/sleep'
import searchEmpty from '@/components/business/search-empty'
export default {
	name: '',
	components: { orderItem, searchEmpty },
	props: {
		list: { type: Array, default: [] },
		isLoading: { type: Boolean, default: false },
		isFinished: { type: Boolean, default: false }
	},
	methods: {
		handleClick(eventName, item) {
			this.$emit(eventName, item)
		},
		async loadMore() {
			if (this.isLoading || this.isFinished) return 
			
			this.$emit('loadMore')
		},	
		scroll() {
		},
	}
}
</script>
<style lang="less">
.scroll-view-wrap{
	height: 100%;
}
</style>